<lx-dropdown-menu class="lx-select-choices"
                  ng-class="{ 'lx-select-choices--custom-style': lxSelectChoices.parentCtrl.choicesCustomStyle,
                              'lx-select-choices--default-style': !lxSelectChoices.parentCtrl.choicesCustomStyle,
                              'lx-select-choices--is-multiple': lxSelectChoices.parentCtrl.multiple,
                              'lx-select-choices--is-unique': !lxSelectChoices.parentCtrl.multiple,
                              'lx-select-choices--list': lxSelectChoices.parentCtrl.choicesViewMode === 'list',
                              'lx-select-choices--multi-panes': lxSelectChoices.parentCtrl.choicesViewMode === 'panes' }">
    <ul ng-if="::lxSelectChoices.parentCtrl.choicesViewMode === 'list'">
        <li class="lx-select-choices__filter" ng-if="::lxSelectChoices.parentCtrl.displayFilter && !lxSelectChoices.parentCtrl.autocomplete">
            <lx-search-filter lx-dropdown-filter>
                <input type="text" ng-model="lxSelectChoices.parentCtrl.filterModel" ng-change="lxSelectChoices.parentCtrl.updateFilter()">
            </lx-search-filter>
        </li>
        
        <div ng-if="::lxSelectChoices.isArray()">
            <li class="lx-select-choices__choice"
                ng-class="{ 'lx-select-choices__choice--is-selected': lxSelectChoices.parentCtrl.isSelected(choice),
                            'lx-select-choices__choice--is-disabled': !lxSelectChoices.parentCtrl.isSelected(choice) && lxSelectChoices.parentCtrl.isMaxSelected(),
                            'lx-select-choices__choice--is-focus': lxSelectChoices.parentCtrl.activeChoiceIndex === $index }"
                ng-repeat="choice in lxSelectChoices.parentCtrl.choices | filterChoices:lxSelectChoices.parentCtrl.filter:lxSelectChoices.parentCtrl.filterModel"
                ng-bind-html="::lxSelectChoices.parentCtrl.displayChoice(choice)"
                ng-click="lxSelectChoices.parentCtrl.toggleChoice(choice, $event)"></li>
        </div>

        <div ng-if="::!lxSelectChoices.isArray()">
            <li class="lx-select-choices__subheader"
                ng-repeat-start="(subheader, children) in lxSelectChoices.parentCtrl.choices"
                ng-bind-html="::lxSelectChoices.parentCtrl.displaySubheader(subheader)"></li>

            <li class="lx-select-choices__choice"
                ng-class="{ 'lx-select-choices__choice--is-selected': lxSelectChoices.parentCtrl.isSelected(choice),
                            'lx-select-choices__choice--is-focus': lxSelectChoices.parentCtrl.activeChoiceIndex === $index }"
                ng-repeat-end
                ng-repeat="choice in children | filterChoices:lxSelectChoices.parentCtrl.filter:lxSelectChoices.parentCtrl.filterModel"
                ng-bind-html="::lxSelectChoices.parentCtrl.displayChoice(choice)"
                ng-click="lxSelectChoices.parentCtrl.toggleChoice(choice, $event)"></li>
        </div>

        <li class="lx-select-choices__subheader" ng-if="lxSelectChoices.parentCtrl.helperDisplayable()">
            {{ lxSelectChoices.parentCtrl.helperMessage }}
        </li>
    </ul>

    <div class="lx-select-choices__panes-wrapper" ng-if="lxSelectChoices.parentCtrl.choicesViewMode === 'panes' && lxSelectChoices.parentCtrl.choicesViewSize === 'large'" lx-stop-propagation="click touchstart touchend">
        <div class="lx-select-choices__loader" ng-if="lxSelectChoices.parentCtrl.loading">
            <lx-progress lx-type="circular" lx-color="white" lx-diameter="60"></lx-progress>
        </div>

        <div class="lx-select-choices__panes-container" ng-if="!lxSelectChoices.parentCtrl.loading">
            <div class="lx-select-choices__pane lx-select-choices__pane-{{ $index }}"
                 ng-class="{ 'lx-select-choices__pane--is-filtering': lxSelectChoices.parentCtrl.matchingPaths !== undefined,
                             'lx-select-choices__pane--first': $first,
                             'lx-select-choices__pane--last': $last }"
                 ng-repeat="pane in lxSelectChoices.parentCtrl.panes">
                <div ng-repeat="(label, items) in pane"
                   class="lx-select-choices__pane-choice"
                   ng-class="{ 'lx-select-choices__pane-choice--is-selected': lxSelectChoices.parentCtrl.isPaneToggled($parent.$index, label) || lxSelectChoices.parentCtrl.isSelected(items) || ($parent.$last && lxSelectChoices.parentCtrl.activeChoiceIndex === $index),
                               'lx-select-choices__pane-choice--is-matching': lxSelectChoices.parentCtrl.isMatchingPath($parent.$index, label),
                               'lx-select-choices__pane-choice--is-leaf': lxSelectChoices.isArray(pane) }"
                   ng-bind-html="(lxSelectChoices.isArray(pane)) ? lxSelectChoices.parentCtrl.displayChoice(items) : lxSelectChoices.parentCtrl.displaySubheader(label)"
                   ng-click="lxSelectChoices.parentCtrl.togglePane($event, $parent.$index, label, true)">
                </div>
            </div>
        </div>
    </div>

    <div class="lx-select-choices__panes-wrapper" ng-if="lxSelectChoices.parentCtrl.choicesViewMode === 'panes' && lxSelectChoices.parentCtrl.choicesViewSize === 'small'" lx-stop-propagation="click touchstart touchend">
        <div class="lx-select-choices__loader" ng-if="lxSelectChoices.parentCtrl.loading">
            <lx-progress lx-type="circular" lx-color="white" lx-diameter="60"></lx-progress>
        </div>
        <div class="lx-select-choices__panes-container" ng-if="!lxSelectChoices.parentCtrl.loading">
            <div class="lx-select-choices__pane lx-select-choices__pane"
                ng-class="{ 'lx-select-choices__pane--is-filtering': lxSelectChoices.parentCtrl.matchingPaths !== undefined,
                            'lx-select-choices__pane--first': $first,
                            'lx-select-choices__pane--last': $last }"
                ng-repeat="pane in lxSelectChoices.parentCtrl.panes">
                <div ng-include="'select-choices-accordion.html'" ng-init="level = 0"></div>
            </div>
        </div>
    </div>

    <lx-progress lx-type="linear" lx-color="primary" ng-if="lxSelectChoices.parentCtrl.loading"></lx-progress>
</lx-dropdown-menu>
